<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>应用系统管理</title>
<link href="../css/popForm.css" rel="stylesheet" type="text/css" />
<link href="../css/tab.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="../scripts/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
//请求url
var url = '<%=basePath%>rest/apm/applications';
function getApps(){
	$('#showtable').html('');
	$.getJSON(url, function(data) {
		apps=data.applications;
		CreateTable(apps);
	});
}

//表格提交方法，根据funNum值确定是调用增加还是更新方法
function apptab(){
	var i=document.getElementById('funNum').value;
	if(i==1){
		addApp();
	}else if(i==2){
		updApp();
	}
}

//弹出添加表单
function addForm(){
	document.getElementById('funNum').value=1;
	 showPopup('300px','190px');
}

//添加方法
function addApp() {
	var url1 = '<%=basePath%>rest/apm/applications';
	var jsonObj=jsonData();
	$.ajax({
		 url: url1,
		 type:'POST',
		 contentType:'application/json; charset=UTF-8',
		 data:jsonObj,
		 success: function(data) {
			 showOperResult(data);
		 }
		});
	$('#showtable').html('');
	getApps();
}

//更新方法
function updApp(){
	var url1 = '<%=basePath%>rest/apm/applications';
		var jsonObj = jsonData();
		$.ajax({
			url : url1,
			type : 'PUT',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				 showOperResult(data);
			}
		});
		$('#showtable').html('');
		getApps();
	}

	//删除方法
	function delApp(id) {
		var delurl = '<%=basePath%>rest/apm/applications/'+id;
		$.ajax({
			url : delurl,
			type : 'DELETE',
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getApps();
	}

	//封装json数据，为了代码清晰 
	function jsonData() {
		var id = document.getElementById('id').value;
		var systemId = document.getElementById('systemId').value;
		var systemCode = document.getElementById('systemCode').value;
		var systemName = document.getElementById('systemName').value;
		var nodeIds = document.getElementById('nodeIds').value;
		var relationIds = document.getElementById('relationIds').value;
		var status = document.getElementById('status').value;
		var nodeArr = new Array();
		var myJSONText;
		if (nodeIds) {
			nodeArr = nodeIds.replace(/，/ig,',').split(",");
			myJSONText = JSON.stringify(nodeArr);
		}
		
		var relationArr = new Array();
		var relationText;
		if (relationIds) {
			relationArr = relationIds.replace(/，/ig,',').split(",");
			relationText = JSON.stringify(relationArr);
		}
		var jsonStr = "{";
		jsonStr += "\"id\":";
		jsonStr += "\"" + id + "\"";
		jsonStr += ",";
		jsonStr += "\"systemId\":";
		jsonStr += "\"" + systemId + "\"";
		jsonStr += ",";
		jsonStr += "\"systemCode\":";
		jsonStr += "\"" + systemCode + "\"";
		jsonStr += ",";
		jsonStr += "\"systemName\":";
		jsonStr += "\"" + systemName + "\"";
		jsonStr += ",";
		jsonStr += "\"nodeIds\":";
		jsonStr += "" + myJSONText + "";
		jsonStr += ",";
		jsonStr += "\"relationIds\":";
		jsonStr += "" + relationText + "";
		jsonStr += ",";
		jsonStr += "\"status\":";
		jsonStr += "\"" + status + "\"";
		jsonStr += "}";
		return jsonStr;//关键在于转换。 
	}

	$(document).ready(function() {
		getApps();
		getNodes();
		getRelations();
	});

	//创建表格
	function CreateTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showtable"));
		var th = $("<th></th>");
		var td7 = $("<td>id</td>");
		var td1 = $("<td>systemId</td>");
		var td2 = $("<td>systemCode</td>");
		var td3 = $("<td>time</td>");
		var td4 = $("<td>systemName</td>");
		var td5 = $("<td>nodeIds</td>");
		var td6 = $("<td>relationIds</td>");
		var td8 = $("<td>status</td>");
		var td9 = $("<td>操作</td>");
		td7.appendTo(th);
		td1.appendTo(th);
		td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		td6.appendTo(th);
		td8.appendTo(th);
		td9.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var objStr=JSON.stringify(datalist[k]);
			var tr1 = $("<tr></tr>");
			var td7 = $("<td>" + datalist[k].id + "</td>");
			var td1 = $("<td>" + datalist[k].systemId + "</td>");
			var td2 = $("<td>" + datalist[k].systemCode + "</td>");
			var td3 = $("<td width=50px>" + datalist[k].time + "</td>");
			var td4 = $("<td>" + datalist[k].systemName + "</td>");
			var td5 = $("<td width=50px>" + datalist[k].nodeIds + "</td>");
			var td6 = $("<td width=50px>" + datalist[k].relationIds + "</td>");
			var td8 = $("<td>" + datalist[k].status + "</td>");
			var td9 = $("<td><a href='#' onclick=delApp('" + datalist[k].id+ "')>删除</a>&nbsp;||&nbsp;<a href='#' onclick=showUpdFormVal("+objStr+")>编辑</a></td>");
			td7.appendTo(tr1);
			td1.appendTo(tr1);
			td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			td6.appendTo(tr1);
			td8.appendTo(tr1);
			td9.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showtable").append("</table>");
	}
	
	//添加显示节点列表
	var urlnode = '<%=basePath%>rest/apm/nodes';
	function getNodes(){
		$('#showNodetable').html('');
		$.getJSON(urlnode, function(data) {
			Nodes=data.nodes;
			CreateNodeTable(Nodes);
		});
	}
	
	//创建节点列表表格
	function CreateNodeTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showNodetable"));
		var th = $("<th></th>");
		var td1 = $("<td>serviceId</td>");
		var td2 = $("<td>serviceCode</td>");
		var td3 = $("<td>serviceName</td>");
		var td4 = $("<td>ip</td>");
		var td5 = $("<td>port</td>");
		td1.appendTo(th);
		td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].serviceId + "</td>");
			var td2 = $("<td>" + datalist[k].serviceCode + "</td>");
			var td3 = $("<td>" + datalist[k].serviceName + "</td>");
			var td4 = $("<td width=50px>" + datalist[k].ip + "</td>");
			var td5 = $("<td>" + datalist[k].port + "</td>");
			td1.appendTo(tr1);
			td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showNodetable").append("</table>");
	}
	
	//添加显示关系列表
	var urlrelation = '<%=basePath%>rest/apm/relations';
	//查询资源列表方法
	function getRelations() {
		$('#showRelationtable').html('');
		$.getJSON(urlrelation, function(data) {
			relations = data.relations;
			CreateRelaionTable(relations);
		});
	}
	
	//创建关系列表表格
	function CreateRelaionTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showRelationtable"));
		var th = $("<th></th>");
		var td1 = $("<td>id</td>");
		var td2 = $("<td>relationId</td>");
		var td3 = $("<td>from</td>");
		var td4 = $("<td>to</td>");
		td1.appendTo(th);
		td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].id + "</td>");
			var td2 = $("<td>" + datalist[k].relationId + "</td>");
			var td3 = $("<td>" + datalist[k].from + "</td>");
			var td4 = $("<td>" + datalist[k].to + "</td>");
			td1.appendTo(tr1);
			td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showRelationtable").append("</table>");
	}
	
	function showOperResult(status){
		$('#operStaus').html('');
		if(status==1){
			$('#operStaus').html("<font size='3' color='red'>操作失败！</font>");
		}else if(status==2){
			$('#operStaus').html("<font size='3' color='red'>操作成功！</font>");
		}
	}
	
	//弹出更新表单
	function showUpdFormVal(obj){
		 document.getElementById('funNum').value=2;
		 
		 document.getElementById('systemId').value=obj.systemId;
		 document.getElementById('systemCode').value=obj.systemCode;
		 document.getElementById('systemName').value=obj.systemName;
		 document.getElementById('nodeIds').value=obj.nodeIds;
		 document.getElementById('relationIds').value=obj.relationIds;
		 document.getElementById('status').value=obj.status;
		 
		 showPopup('300px','190px');
	}
</script>

<body>
	<input type="button" onclick="getApps();" value="查询系统" />
	<input type="button" onclick="addForm();" value="添加系统" />
	<br />
	<!--操作结果提示-->
	<div id="operStaus" style="width:150px;height:25px;"></div>
	<input type="hidden" id="funNum" name="funNum" />
	<div id="popDiv">
		<div id="popTitle">
			<!-- 标题div -->
			<span class="title_left">修改操作</span> <span class="title_right">
			<a href="#" onclick="hidePopup();">关闭</a> </span>
		</div>
		<!-- 表单div -->
		<div id="popForm">
		<form id="form1" name="form1">
			<table >
				<tr id="sysid" style="display: none;">
					<td width="60" align="left">systemId</td>
					<td width="150" align="left">
						<input type="text" id="systemId" name="systemId" />
					</td>
				</tr>
				<tr>
					<td align="left">systemCode</td>
					<td align="left">
						<input type="text" id="systemCode" name="systemCode" />
					</td>
				</tr>
				<tr>
					<td align="left">systemName</td>
					<td align="left">
						<input type="text" id="systemName" name="systemName" />
					</td>
				</tr>
				<tr>
					<td align="left">nodeIds</td>
					<td align="left">
						<input type="text" id="nodeIds" name="nodeIds" />
					</td>
				</tr>
				<tr>
					<td align="left">relationIds</td>
					<td align="left">
						<input type="text" id="relationIds" name="relationIds" />
					</td>
				</tr>
				<tr>
					<td align="left">status</td>
					<td align="left">
						<input type="text" id="status" name="status" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="提交" onclick="apptab();" />
						&nbsp;<input type="reset" value="重置" />&nbsp;<input type="button" value="关闭" onclick="hidePopup()" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	</div>
	<div id="showtable"></div>
	<hr>
	<div>
	<div id="showNodetable" style="float:left;clear:left;">
	</div>
	<div id="showRelationtable" style="float:rigth;clear:right;"></div>
	</div>
</body>
<script type="text/javascript" src="../scripts/mouseMoveForm.js"></script>
</html>